<template>
  <div id="app">
    <div class="footer_wrap">
      <router-link to="/MyHome">MyHome</router-link>
      ||
      <router-link to="/MyAbout">MyAbout</router-link>
      <br />
      <button @click="go1(page1, $event)">page1</button>
      ||
      <button @click="go2(page2, $event)">page2</button>
      <br />
      <button @click="add1">加一:</button>
      {{ count }}
      ||
      输入：
      <input :value="count" @input="addinput" type="number">
      
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      page1: "/MyPage1/1",
      page2: "MyPage2",
    };
  },
  created() {
    console.log(this.$store);
  },
  name: "App",
  components: {},
  methods: {
    go1(a, b) {
      console.log(a, b);
      this.$router.push(
        {
          path: `${a}`,
        },
        () => {}
      );
    },
    go2() {
      console.log(this.page2);
      this.$router.push(
        {
          name: this.page2,
          params: {
            id: "1",
          },
        },
        () => {}
      );
    },
    add1() {
      this.$store.commit("addCount");
    },
    addinput(e) {
      const num = +e.target.value
      this.$store.commit("addCount",num);
    },
  },
  computed: {
    /**
     * 数组形式
     * 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
     * */
    ...mapState(["count", "name"]),

    /**
     * 对象形式
     */
    ...mapState({
      count: "count", // 这种就是count:"count", 的简写
      count1: "count1",
      repeatCount: "count2", // 当组件中与vuex中的字符已经出现重复时，使用 repeatCount 来映射 store.state.count2
      count3: (state) => {
        // 映射 count3 为 store.state.conut3的值
        return state.count3;
      },
      helloName: function (state) {
        // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
        return this.hello + state.name;
      },
      addNumber: function (state) {
        // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
        return this.number + state.count;
      },
    }),
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
